<template>
  <div>
    <el-card class="box-card">
      <!-- 头部区域 -->
      <template #header>
        <div class="header">
          <span>出库记录</span>
        </div>
      </template>
      <!-- 搜索表单 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="商品：">
          <el-select
            v-model="search.goodsId"
            placeholder="请选择商品"
            prop="goodsName"
          >
            <el-option
              v-for="g in goods"
              :key="g.goodsId"
              :label="g.goodsName"
              :value="g.goodsId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-row style="display: flex; justify-content: inherit">
            <el-button icon="el-icon-search" type="primary" @click="GetOutgoods"
              >查询</el-button
            >
            <el-button
              icon="el-icon-refresh"
              type="primary"
              @click="SearchReset"
              >重置</el-button
            >
            <download-excel
              :data="tableData"
              :fields="json_fields"
              name="商品出库记录表.xls"
              style="margin-left: 10px"
            >
              <el-button icon="el-icon-upload" type="primary"
                >记录导出</el-button
              >
            </download-excel>
          </el-row>
        </el-form-item>
      </el-form>
      <!-- 人员管理列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="商品名" prop="goodsName"> </el-table-column>
        <el-table-column label="出库操作人" prop="realName"> </el-table-column>
        <el-table-column label="出库数量" prop="outgoodsNum"> </el-table-column>
        <el-table-column label="利润" prop="totalProfit"> </el-table-column>
        <el-table-column label="出库时间" prop="outgoodsTime">
        </el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              slot="reference"
              circle
              icon="el-icon-delete"
              size="small"
              type="danger"
              @click="userDelete(scope.row.userId)"
            ></el-button>
          </template>
        </el-table-column> -->
        <template #empty>
          <el-empty description="没有数据" />
        </template>
      </el-table>
      <!-- 分页条 -->
      <div class="block">
        <el-pagination
          :current-page="this.pageNum"
          :page-size="this.pageSize"
          :page-sizes="[3, 5, 10]"
          :total="this.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      //导出
      json_fields: {
        商品名: "goodsName",
        出库数量: "outgoodsNum",
        利润: "totalProfit",
        出库时间: "outgoodsTime",
      },
      // //从本地存储获取user数据
      user: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
      pageNum: 1,
      pageSize: 3,
      total: 10,
      tableData: [],
      search: {
        goodsId: "",
      },
      goods: {},
    };
  },
  methods: {
    //分页方法
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      console.log(pageSize);
      this.GetOutgoods();
    },

    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.GetOutgoods();
    },
    //出库记录搜索
    GetOutgoods() {
      request
        .get("/inventory/Searchoutgoods", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            goodsId: this.search.goodsId,
          },
        })
        .then((res) => {
          if (res.data.code == "0") {
            this.tableData = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            this.$message.error("查询失败");
          }
        });
    },
    //搜索条件操作
    SearchReset() {
      this.search.goodsId = "";
    },
    //获取所有商品信息
    getGoods() {
      request.get("/goods/list").then((res) => {
        if (res.data.code == "0") {
          this.goods = res.data.data;
        } else {
          this.$message.error("查询失败");
        }
      });
    },
  },
  created() {
    this.getGoods();
    this.GetOutgoods();
  },
};
</script>

<style>
</style>